<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item
        :info="info"
        name="shop"
        to="/shop"
        icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="balance" to="/balance" icon="balance-list-o"
        >订单</van-tabbar-item
      >
      <van-tabbar-item name="user" icon="user-o" @click="isLogin"
        >用户</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabNavBar",
  data() {
    return {
      // 第一次取值和页面刷新后取值都是一样的
      active: window.sessionStorage.getItem("tabnav") || "home"
    };
  },
  computed: {
    info() {
      let len = this.$store.state.shop.length;
      len = len === 0 ? "" : len;
      return len;
    }
  },
  watch: {
    active(newVal) {
      window.sessionStorage.setItem("tabnav", newVal);
    }
  },
  methods: {
    isLogin() {
      var user = this.$store.state.user.loginState;
      if (!user) {
        // 去我的界面
        if (this.$route.name !== "user") {
          this.$router.push("/user");
        }
      } else {
        // 如果路由已经是login，别进去了
        if (this.$route.name !== "login") {
          this.$router.push("/login");
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
